<script setup lang="ts">
import { onMounted, reactive,ref } from "vue";
import diqiuVue from "./diqiu.vue";
import lianmengVue from "./lianmeng.vue";
import weiyuanhuiVue from "./weiyuanhui.vue";

const navActive = ref(0);
const nav = reactive({
    list:[
        {
            index:0,
            title:"守望地球"
        },{
            index:1,
            title:"中关村绿色产业联盟"
        },{
            index:2,
            title:"中国汽车改装用品协会新闻传媒委员会"
        }
    ]
})

const changeNav =  (index: any) =>{
    navActive.value = index;
}

</script>

<template>
    <div class="wrapper">
        <div class="bannner">
            <img src="https://img.cctvch.cn/uploads/2efb2b6caab6d81f019b1ddaa35e3605.png" alt="">
        </div>
        <div class="container">
            <div class="nav-wrapper">
                <ul class="nav flex">
                    <li class="nav-item" 
                    v-for="item in nav.list" 
                    :key="item.index"
                    :class="{'nav-active':item.index == navActive}"
                    @click="changeNav(item.index)"
                    >
                        {{item.title}}
                    </li>
                </ul>
            </div>
            <div class="content">
                <div class="content-item" v-if="navActive == 0">
                    <diqiuVue></diqiuVue>
                </div>
                <div class="content-item" v-else-if="navActive == 1">
                    <lianmengVue></lianmengVue>
                </div>
                <div class="content-item" v-else>
                    <weiyuanhuiVue></weiyuanhuiVue>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.bannner {
    width:100%;
    max-width: 1440px;
    margin: 0 auto;
    /* height:580px; */
    
    img{
        display:block;
        width:100%;
        height:100%;
        object-fit:contain;
    }
}

.container {
    margin: 0 auto;
    width: 1440px;

    .nav-wrapper {
        height: 80px;
        border-bottom: 2px solid #c6c6c6;

        .nav-item {
            padding: 0 23px;
            margin-right: 70px;
            height: 80px;
            line-height: 80px;
            position: relative;
            cursor: pointer;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
            }
        }

        .nav-active {
            &::after {
                width:100%;
                height: 3px;
                background: linear-gradient(90deg, #3888FF 0%, #6C71FF 35%, #AA58FA 65%, #FB6D86 100%);
            }
        }
    }

    .content {
        
    }
}
</style>